<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>

</head>
<body>

<div id="app">
    <el-row>

        <el-button type="danger" plain @click="deleteByIds">批量删除</el-button>
        <el-button type="primary" plain @click="dialog = true">新增</el-button>

    </el-row>

<!--新增问题的弹窗界面-->
    <el-drawer
            title="新增问题"
            :visible.sync="dialog"
            direction="ltr"
            custom-class="demo-drawer"
            ref="drawer"
    >
        <div class="demo-drawer__content">
            <el-form :model="question">
                <el-form-item label="问题名称" :label-width="formLabelWidth">
                    <el-input v-model="question.questionName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="问题类型" :label-width="formLabelWidth">
                    <el-select v-model="question.questionType" placeholder="请选择问题类型">
                        <el-option label="单选" value="1"></el-option>
                        <el-option label="多选" value="2"></el-option>
                        <el-option label="填空" value="3"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="问题描述">
                    <el-input type="textarea" v-model="question.questionDescription"></el-input>
                </el-form-item>
                <el-form-item label="是否必填">
                    <el-switch v-model="question.requiredFlag"
                               active-value="1"
                               inactive-value="0"
                    ></el-switch>
                </el-form-item>
            </el-form>



            <div class="demo-drawer__footer">
                <el-button @click="cancelForm">取 消</el-button>
                <el-button type="text" @click="addquestion">提交</el-button>
            </div>
        </div>
    </el-drawer>
    <!--表格-->
   <template>
    <el-table
            :data="tableData"
            style="width: 100%"
            :row-class-name="tableRowClassName"
            @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                type="index"
                width="50">
        </el-table-column>

        <el-table-column
                prop="id"
                label="id"
                align="center"
                id="aid"
        >
        </el-table-column>

        <el-table-column
                prop="questionName"
                label="问题名称"
                align="center"
        >
        </el-table-column>
        <el-table-column
                prop="questionDescription"
                label="问题描述"
                align="center"
        >
        </el-table-column>
        <el-table-column
                prop="questionType"
                align="center"
                label="选项类型">
        </el-table-column>
        <el-table-column
                prop="requiredFlag"
                align="center"
                label="是否必填">
        </el-table-column>

        <el-table-column
                align="center"
                label="操作">
            <template slot-scope="scope">

                <el-row>
                    <el-button type="primary" @click="selectOption(scope.row)">查看/编辑选项</el-button>
                    <el-button type="danger" @click="deleteQuestionById(scope.$index, scope.row)">删除</el-button>
                </el-row>
            </template>
        </el-table-column>

    </el-table>
   </template>

    <!--新增问题的弹窗界面-->
    <el-drawer
            title="查看/编辑选项"
            :visible.sync="dialog2"
            direction="ltr"
    >
        <el-table :data="optionData">
            <el-table-column property="id" label="选项id" width="150"></el-table-column>
            <el-table-column property="optionName" label="选项名称" width="200"></el-table-column>
            <el-table-column
                    align="center"
                    label="操作">
                <template slot-scope="scope">

                    <el-row>
                        <el-button type="danger" @click="deleteOptionById(scope.$index, scope.row)">删除</el-button>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>

        <el-button type="text" @click="addOption">添加选项</el-button>
    </el-drawer>

</div>



<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script src="js/axios-0.18.0.js"></script>

<script>
    //import {axios} from "./js/axios-0.18.0";

    new Vue({
        el:"#app",
        mounted(){
            this.surveyId = this.getid("sid");
            this.selectAll();
            this.question.surveyId = this.surveyId;


        },
        methods:{

            addOption(){
                var _this = this;
                this.$prompt('请输入邮箱', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({ value }) => {
                    axios({
                        method:"post",
                        url:"http://localhost:8080/brand-case/question/addOption?surveyId="+this.surveyId+"&questionId="+this.questionId,
                        data:value
                    }).then(function (resp) {
                        if(resp.data == "success"){
                            //添加成功


                            // 弹出消息提示
                            _this.$message({
                                message: '恭喜你，添加成功,请退出重新查看',
                                type: 'success'
                            });
                            // 重新查询数据
                            //_this.selectOption(_this.questionId);

                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });
                });

            },

            selectOption(row){
                this.questionId = row.id;
                axios({
                    method:"post",
                    url:"http://localhost:8080/brand-case/question/selectOption?questionId="+row.id,
                    data:this.surveyId
                }).then(resp =>{
                    //设置表格数据
                    this.optionData = resp.data;
                    this.dialog2 = true;

                })
            },

            //获取url参数的方法,传的参为键的名字
            getid(strParame) {
                var args = new Object( );
                var query = location.search.substring(1);

                var pairs = query.split("&"); // Break at ampersand
                for(var i = 0; i < pairs.length; i++) {
                    var pos = pairs[i].indexOf('=');
                    if (pos == -1) continue;
                    var argname = pairs[i].substring(0,pos);
                    var value = pairs[i].substring(pos+1);
                    value = decodeURIComponent(value);
                    args[argname] = value;
                }
                return args[strParame];
            },
            selectAll(){
                axios({
                    method:"post",
                    url:"http://localhost:8080/brand-case/question/selectAll",
                    data:this.surveyId
                }).then(resp =>{
                    //设置表格数据
                    this.tableData = resp.data;

                })
            },

            addquestion() {
                var _this = this;
                this.$confirm('是否确认提交该问题?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 发送ajax请求，添加数据
                    axios({
                        method:"post",
                        url:"http://localhost:8080/brand-case/question/add",
                        data:_this.question
                    }).then(function (resp) {
                        if(resp.data == "success"){
                            //添加成功

                            //关闭窗口
                            _this.dialogVisible = false;

                            // 重新查询数据
                            _this.selectAll();
                            // 弹出消息提示
                            _this.$message({
                                message: '恭喜你，添加成功',
                                type: 'success'
                            });

                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            cancelForm() {
                this.loading = false;
                this.dialog = false;
                clearTimeout(this.timer);
            }
        },
        data() {
            return {
                surveyId: 5,
                questionId:5,
                table: false,
                dialog: false,
                dialog2: false,
                loading: false,
                tableData: [{
                    id: '',
                    surveyId: '',
                    questionType: '',
                    questionName: '',
                    questionDescription: '',
                    questionSort: '',
                    requiredFlag: '',
                }, {
                    id: '',
                    surveyId: '',
                    questionType: '',
                    questionName: '',
                    questionDescription: '',
                    questionSort: '',
                    requiredFlag: '',
                }, {
                    id: '',
                    surveyId: '',
                    questionType: '',
                    questionName: '',
                    questionDescription: '',
                    questionSort: '',
                    requiredFlag: '',
                }, {
                    id: '',
                    surveyId: '',
                    questionType: '',
                    questionName: '',
                    questionDescription: '',
                    questionSort: '',
                    requiredFlag: '',
                }],
                optionData:[
                    {
                        id:'',
                        surveyId:'',
                        questionId:'',
                        optionName:'',
                        optionSort:'',
                        optionPicId:''
                    }
                ],
                option:{
                    id:'',
                    surveyId:'',
                    questionId:'',
                    optionName:'',
                    optionSort:'',
                    optionPicId:''
                },
                question: {
                    id: '',
                    surveyId: '',
                    questionType: '',
                    questionName: '',
                    questionDescription: '',
                    questionSort: '',
                    requiredFlag: '',

                },



                formLabelWidth: '80px',
                timer: null,
            };
        }
    });
</script>
</body>
</html>